<template>
<div>
  <h3>{{news.title}}</h3>
  <p class="time">
      <span>发表时间：2020-01-29 11:20:59</span>
      <span>点击0次</span>
  </p>
  <hr>
  <div class="newsCon" v-html="news.content"></div>
  <comment :com="com" @nextPage="nextPage"></comment>
</div>
</template>

<script>
import comment from "../comment.vue"
export default {
    data(){
        return {
            news: [],
           com:[],
            page:1
        }
    },
    computed:{
        addPage(){
            return this.page
        }
    },
    methods:{
        getNews(){
            this.$http.get("http://newsInfo.com").then(result=>{
              this.news=result.body.data; //得到的是一个数组
              //判断数组中哪一项的ID值等于当前路由的id
              this.news= this.news.filter(item=>{
                   return item.id == this.$route.params.id
               });
               this.news=this.news[0]
              
            })
        },
        getData(){
            
            var showCom = []
            this.$http.get("http://comment.com").then(result=>{
            this.com = result.body.data;
            this.com.forEach(item=>{
                if(item.page<=this.addPage){
                    showCom.push(item)   
                }
            })
            this.com = showCom;
        
        })
            },
        nextPage(){
            this.page++;
        this.getData()
        }
        },
        created(){
            this.getNews();
            this.getData()
        
        },
    components: {
        comment
    }
}
</script>




<style  scoped>
 h3{
     font-size: 16px;
     color: red;
     text-align: center;
     padding-top:10px
 }
 p{
     margin:0;
     padding: 0
 }
 .time{
     display: flex;
     justify-content: space-between;
      color: #26a2ff;
      padding-top:10px
 }
 .newsCon{
     color: #666;
     font-size: 14px;
     padding-bottom: 10px
 }
hr{
    margin: 10px 0;
    
}

</style>